<template>
  <div>
    <el-container>
      <el-header class="header">
        <label class="label">Fabric Explorer</label>
        <div style="position: relative;right: 38px;">
          <el-input v-model="query" class="hash-input" placeholder="区块高度/区块hash" clearable />
          <el-button type="success" plain class="query-button">查询</el-button>
        </div>
        <img src="~ast/imageSet/fabric.svg" alt="" width="150px" height="30px" style="margin-right:20px">
      </el-header>
      <div>
        <div class="main-content-stat">
          <el-card class="box-card box-card-1" style="width:20%">
            <div slot="header" class="clearfix" style="background-color:rgb(29,76,103)">
              <span>区块高度</span>
            </div>
            <div class="text item " style="font-weight: 900;font-size:28px">{{ blockHeight }}</div>
            <div class="text item">
              <i class="el-icon-copy-document" style="color:#909399 !important;margin:0 7px" />区块
            </div>
          </el-card>

          <el-card class="box-card box-card-2" style=" width:40%">
            <div slot="header" class="clearfix">
              <span>网络信息</span>
            </div>
            <div class="card-body">
              <span style="color:black !important;margin:0;font-weight: 900;font-size:24px;flex:1">{{ peerNum }}</span>
              <div style="text-align: center;flex:1;padding-top: 5px;">
                <i class="el-icon-place icon" />节点
              </div>
            </div>
            <div class="card-body">
              <span style="color:black !important;margin:0;font-weight: 900;font-size:24px;flex:1">{{ orgNum }}</span>
              <div style="text-align: center;flex:1;padding-top: 5px;">
                <i class="el-icon-user icon" />组织
              </div>
            </div>
            <div class="card-body">
              <span style="color:black !important;margin:0;font-weight: 900;font-size:24px;flex:1">{{ channelNum }}</span>
              <div style="text-align: center;flex:1;padding-top: 5px;">
                <i class="el-icon-d-arrow-right icon" />通道
              </div>
            </div>
          </el-card>

          <el-card class="box-card box-card-3" style="width:20%;">
            <div slot="header" class="clearfix">
              <span>智能合约</span>
            </div>
            <div class="text" style="font-weight: 900;font-size:28px">{{ chainCodeNum }}</div>
            <div class="text">
              <i class="el-icon-reading" style="color:#909399 !important;margin:0 7px" />合约
            </div>
          </el-card>
        </div>
        <el-select v-model="channel" placeholder="请选择">
          <el-option v-for="item in channels" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </div>
    </el-container>
  </div>

</template>

<script>
export default {
  name: 'FabricIndex',
  data(){
    return {
      query: '',
      blockHeight: 6,
      peerNum: 10,
      orgNum: 2,
      channelNum: 2,
      chainCodeNum: 10,
      channels: [{
        value: '1',
        label: 'channel'
      }, {
        value: '2',
        label: 'mychannel'
      }],
      channel: '1'
    }
  }
}
</script>

<style scope>
.header{
  background-color: rgb(248, 249, 250);
  height: 80px !important;
  display: flex;
  flex-direction:row;
  justify-content:space-between;
  align-items:center;
}
.label{
  font-size: 32px;

  color: #606060;
  height: 80px;
  line-height: 80px;
  margin-left: 20px
}
.hash-input{
  width: 400px;
}
.query-button{
  margin-left: 5px;
}
.main-content-stat{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 20px
}

.main-content-stat span{
  color: #fff!important;
  display: block;
  margin: auto 0;
  text-align: center;
  font-size: 20px
}

.box-card-1>div:nth-of-type(1){
  background-color:rgb(29,76,103)
}
.box-card-1>div:nth-of-type(2){
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.box-card-2>div:nth-of-type(1){
  background-color:rgb(226,121,79)
}
.box-card-2>div:nth-of-type(2){
  display: flex;
}
.el-card__body>div{
  flex: 1
}
.box-card-2 .el-card__body>div:nth-of-type(2){
  border-right: 1px solid #909399;
  border-left: 1px solid #909399;
}
.box-card-3>div:nth-of-type(1){
  background-color:rgb(75,121,53)
}
.el-card__body{
  height: 70px;
}
i {
  color:#909399 !important
}
.text{
  font-size: 20px;
  text-align: center;
}
.el-icon-place::before{
  display: inline-block;
  width: 20px;
}
.card-body{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.icon{
  color:#909399 !important;
  margin:0 7px;
  height:100%;
  text-align:center;
  font-size:22px
}
</style>
